<template>
	<div class="page">
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 30px;">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商户管理</el-breadcrumb-item>
			<el-breadcrumb-item>商户列表(超级管理)</el-breadcrumb-item>
			<el-breadcrumb-item>瑞银信进件</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="top-nav">
			 <div class="mch-id">
				  商户号 ： {{mch_id}}
			 </div>
			 <el-row style="line-height: 50px;">
					<el-button @click = 'queryMerchant'>进件结果查询</el-button>
					<el-button @click = 'wxConfig'>微信支付配置</el-button>
					<el-button @click = 'queryWXConfig'>微信配置查询</el-button>
			 </el-row>
		</div>
		<el-steps :active="active" finish-status="success" align-center style="margin-top: 30px;">
			<el-step title="上传图片"></el-step>
			<el-step title="完善商户信息"></el-step>
			<el-step title="返回结果"></el-step>
		</el-steps>
		<!-- 图片上传区域 -->
		<div v-show="showImg">
			<div v-loading="loadingStatus" element-loading-text="上传中请稍后">
				<div class="img-box">
					<div v-for="(item,val) in typeList">
						<div class="img-box-s">
							<!-- 图片展示 -->
							<div class="img-show" v-show="item.show">
								<div class="del-img" @click="delshow(val)"><img :src="delImg" alt=""></div>
								<div class="show-img"><img :src="item.url" alt=""></div>
							</div>
							<!-- 图片上传 -->
							<div class="img-up" v-show="item.upShow">
								<div class="del-img" @click="delup(val)"><img :src="delImg" alt=""></div>
								<el-upload class="avatar-uploader" action="http://openpay.duolaibei.com/admin/upload/upload"
									:show-file-list="false" :on-success="(index,value) => handleAvatarSuccess(index,value,val)"
									:before-upload="beforeAvatarUpload">
									<img v-if="item.url" :src="item.url" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</div>
							<div class="text-t butt">{{item.name}}</div>
							<div class="butt">
								<el-button @click="upChange(val)" v-show="item.butt">上传渠道</el-button>
								<el-button v-show="item.upSuccess" :disabled="true">上传成功</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="next-up-img">
				<el-button type="primary" @click="nextImg">下一步</el-button>
			</div>
		</div>
		<!-- 商户资料 -->
		<div v-show="showInfo">
			<div class="from-box">
				<el-form ref="form" :model="form" label-width="120px">
					<div class="from-title"><span>基本资料</span></div>
					<el-row>
						<el-col :span="24">
							<el-form-item label="商户类型:">
								<el-radio v-model="form.merType" label="MERCHANT_03">企业</el-radio>
								<el-radio v-model="form.merType" label="MERCHANT_02">个体工商户</el-radio>
								<el-radio v-model="form.merType" label="MERCHANT_01">自然人</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="商户全称:">
								<el-input v-model="form.merFullName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商户简称:">
								<el-input v-model="form.merName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="form.merType != 'MERCHANT_01'">
						<el-col :span="8">
							<el-form-item label="营业执照号:">
								<el-input v-model="form.licId"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="执照起始日期:">
								<el-input v-model="form.businesslicenseStart"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="执照结束日期:">
								<el-input v-model="form.businesslicenseExpired"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="法人姓名:">
								<el-input v-model="form.legalName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="法人证件号:">
								<el-input v-model="form.legalCertNo"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="证件起始日期:">
								<el-input v-model="form.legalCertStartDate"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="证件结束日期:">
								<el-input v-model="form.legalCertEndDate"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">
							<el-form-item label="负责人手机号:">
								<el-input v-model="form.legalMobile"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人姓名:">
								<el-input v-model="form.contactName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人手机号:">
								<el-input v-model="form.contactMobile"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系人证件号:">
								<el-input v-model="form.contactIdNo"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="省份:">
								<el-select v-model="province" @change="fprovince" placeholder="请选择">
									<el-option v-for="item in provinceList" :key="item.AreaID" :label="item.name"
										:value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="城市:">
								<el-select v-model="city" @change="fcity" placeholder="请选择">
									<el-option v-for="item in cityList" :key="item.AreaID" :label="item.name"
										:value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="区县:">
								<el-select v-model="area" @change="farea" placeholder="请选择">
									<el-option v-for="item in areaList" :key="item.AreaID" :label="item.name"
										:value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="地址:">
								<el-input v-model="form.addr"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="经营类目:">
								<el-input v-model="form.mcc"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="form.isLegalNameAcct == '2'">
						<el-col :span="12">
							<el-form-item label="被授权人姓名:">
								<el-input v-model="form.authName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="被授权人证件号:">
								<el-input v-model="form.authCertNo"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="from-title"><span>结算信息</span></div>
					<el-row>
						<el-col :span="8">
							<el-form-item label="结算方式:">
								<el-radio v-model="form.settleType" label="D1">D1</el-radio>
								<el-radio v-model="form.settleType" label="T1">T1</el-radio>
								<el-radio v-model="form.settleType" label="ND1">ND1(分账)</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="结算账号类型:">
								<el-radio v-model="form.acctType" label="1">对公</el-radio>
								<el-radio v-model="form.acctType" label="2">对私</el-radio>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="法人同名账户:">
								<el-radio v-model="form.isLegalNameAcct" label="1">是</el-radio>
								<el-radio v-model="form.isLegalNameAcct" label="2">否</el-radio>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="开户名称:">
								<el-input v-model="form.acctName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="结算账号:">
								<el-input v-model="form.account"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="支行联行号:">
								<el-input v-model="form.pbcBankId"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="开户银行名称:">
								<el-input v-model="form.bankName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="开户银行银行号:">
								<el-input v-model="form.bankCode"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="银行预留手机号:">
								<el-input v-model="form.bankReserveMobile"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="开户支行名称:">
								<el-input v-model="form.branchName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="支行所在省份:">
								<el-select v-model="branchProvince" @change="fbprovince" placeholder="请选择">
									<el-option v-for="item in provinceList" :key="item.AreaID" :label="item.name"
										:value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="支行所在市:">
								<el-select v-model="branchCity" @change="fbcity" placeholder="请选择">
									<el-option v-for="item in cityList" :key="item.AreaID" :label="item.name"
										:value="item.code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>			
					<div class="fee" v-for="(item,index) in feeList">
						<div class="from-title">
							<!-- <span>{{nameList[item.name]}}->费率{{item.paymentPrdNo.substr(3)}}</span> -->
							<span
								v-if="['WX','ALI','UPAY'].includes(item.paymentPrdNo)">{{nameList[item.paymentPrdNo]}}->费率{{item.paymentPrdNo}}</span>
							<span v-else>{{nameList[item.paymentPrdNo.substr(3)]}}->费率{{item.paymentPrdNo.substr(3)}}</span>			
							<div class="del-img" @click="del(index)"><img :src="delImg" alt=""></div>
						</div>
						<el-row>
							<el-col :span="24">
								<el-form-item label="费率模型:">
									<el-radio-group v-model="feeList[index].paymentPrdNo">
										<el-radio label="WX">微信一般类</el-radio>
										<el-radio label="ALI">支付宝一般类</el-radio>
										<el-radio label="UPAY">云闪付一般类</el-radio>
										<el-radio label="WX-ONLINE">微信线上互联网类</el-radio>
										<el-radio label="WX-REDU">微信公立医院、学校、宗教类</el-radio>
										<el-radio label="WX-DISCT">微信交通缴费类</el-radio>
										<el-radio label="WX-INSURE">微信保险、线上教育类</el-radio>
										<el-radio label="WX-REBATE">微信教育行业食堂类</el-radio>
										<el-radio label="WX-PREDU">微信私立中小幼类</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<el-form-item label="费率模型:">
									<el-radio-group v-model="feeList[index].feeType" @change="feeType(index)">
										<el-radio label="01">单费率（百分比）</el-radio>
										<el-radio label="02">复合费率（云闪付）</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>			
						<el-row v-if="feeList[index].feeType == '01'">
							<el-col :span="24">
								<el-form-item label="费率(百分比):">
									<el-input v-model="feeList[index].feeTemplate"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<div v-else-if="feeList[index].feeType == '02'">
							<div class="from-title"><span>复合费率：（1）银联手续费率第一档（2）银联手续费率第一档 备注：选择复合费率完成以后需点击确认</span></div>
							<el-row>
								<el-col :span="4">
									<el-form-item label="<1000元(1):">
										<el-input v-model="feeTemplate.feeRateDebitL1"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-form-item label=">=1000元(2):">
										<el-input v-model="feeTemplate.feeRateDebitL2"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-form-item label="借记封顶(1)(元):">
										<el-input v-model="feeTemplate.feeRateDebitCapL1"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-form-item label="贷记卡(1):">
										<el-input v-model="feeTemplate.feeRateCreditL1"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="4">
									<el-form-item label="贷记卡(2):">
										<el-input v-model="feeTemplate.feeRateCreditL2"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item>
								<el-button @click="feesub(index)">确认</el-button>
							</el-form-item>
						</div>
					</div>
					<el-form-item>
						<el-button @click="feeAdd">增加</el-button>
					</el-form-item>
					<el-form-item class="butt">
						<el-button type="primary" @click="onSubmit">提交</el-button>
						<el-button @click="lastImg">上一步</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		
	</div>
</template>

<script>
	// import upImg from "./ryx-tem/up-1";
	// import info from "./ryx-tem/info";
	export default {
		// components: {
		// 	info
		// },
		data() {
			return {
				userid: this.$route.query.id ? this.$route.query.id : 0,
				mch_id: '',  //商户号
				intoNo: '',  //进件返回单号 用于查询结果
				//图片展示
				showImg : true,
				//详情展示
				showInfo : false,
				//步骤条
				active : 1,
				merchantInfo:{},
				//图片展示数据
				delImg: require('../../../../imgs/del.png'),
				merchantType: "1", //商户类型
				bankType: "1", //结算类型
				settleType: "D1", //入账类型
				loadingStatus: false,
				typeList: [{ //展示图片列
						id: 1,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						front_card: '',
						url: '',
						name: '身份证正面',
					},
					{
						id: 2,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						back_card: '',
						url: '',
						name: '身份证反面',
					},
					{
						id: 3,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						business_license: '',
						url: '',
						name: '营业执照',
					},
					{
						id: 5,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						opening_account: '',
						url: '',
						name: '开户许可证',
					},
					{
						id: 6,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						sign_doard: '',
						url: '',
						name: '门头照',
					},
					{
						id: 8,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						cashier: '',
						url: '',
						name: '收银台照片',
					},
					{
						id: 9,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						cashier: '',
						url: '',
						name: '门店内景照片',
					},
					{
						id: 13,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						collect: '',
						url: '',
						name: '商户收单协议照片',
					},
					{
						id: 14,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						power: '',
						url: '',
						name: '结算授权书',
					},
					{
						id: 15,
						show: true,
						upShow: false,
						butt: true,
						upSuccess: false,
						bank_card: '',
						url: '',
						name: '银行卡正面照',
					},
					{
						id: 17,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						beFrontCard: '',
						url: '',
						name: '被授权人证件正面照',
					},
					{
						id: 18,
						show: false,
						upShow: true,
						butt: true,
						upSuccess: false,
						beBackCard: '',
						url: '',
						name: '被授权人证件背面照',
					}
				],
				//商户资料
				form: {
					merType: 'MERCHANT_03', //商户类型 
					merName: '', //商户简称 
					merFullName: '', //商户全称 
					licId: '', //营业执照号 
					legalName: '', //负责人姓名 
					legalCertNo: '', //负责人证件号 码 
					legalMobile: '', //负责人手机号
					contactName: '', //联系人姓名
					contactMobile: '', //联系人手机号
					contactIdNo: '', //联系人证件号 码
					addr: '', //地址
					//手动填写
					province: '', //省份
					city: '', //城市
					area: '', //区县
					authName: '', //被授权人姓名
					authCertNo: '', //被授权人证件号码
					businesslicenseStart: '', //营业执照起始有效日期
					businesslicenseExpired: '', //营业执照截止日期
					legalCertStartDate: '', //证件起始有效期 yyyy-MM-dd
					legalCertEndDate: '', //证件截止有效期 yyyy-MM-dd
					mcc: '', //经营类目 
					//结算
					acctName: '', //开户名称
					account: '', //结算账号
					pbcBankId: '', //开户银行支行联行号
					bankName: '', //开户银行名称
					bankCode: '', //开户银行银行号
					branchName: '', //开户支行名称
					//费率
					// paymentPrdNo: 'WX', //支付产品号
					// feeType: '01', //费率类型
					// feeTemplate: '', //费率模板
					prdList: [],
				
					//手动填写
					branchProvince: '', //开户支行所在省份
					branchCity: '', //开户支行所在市
					bankReserveMobile: '', //银行预留手机号
					payLimit: '', //禁用支付类 型
					settleType: 'D1', //结算方式D1
					acctType: '1', //结算账号类型 对公
					isLegalNameAcct: '1', //是否法人同名账户 
				
				},
				provinceList: {},
				cityList: {},
				areaList: {},
				province: '',
				city: '',
				area: '',
				branchProvince: '',
				branchCity: '',
				feeTemplate: {
					feeRateDebitL1: '0',
					feeRateDebitL2: '0',
					feeRateDebitCapL1: '0',
					feeRateCreditL1: '0',
					feeRateCreditL2: '0',
				},
				//费率展示框
				nameList: {
					WX: '微信一般类',
					ALI: '支付宝一般类',
					UPAY: '云闪付一般类',
					ONLINE: '微信线上互联网类',
					REDU: '微信公立医院、学校、宗教类',
					DISCT: '微信交通缴费类',
					INSURE: '微信保险、线上教育类',
					REBATE: '微信教育行业食堂类',
					PREDU: '微信私立中小幼类',
				},
				feeList: [{
					paymentPrdNo: 'WX',
					feeType: '01',
					feeTemplate: '',
				}],
				prdList: [],
			};
		},
		methods: {
			//主体方法
			nextImg() {
				this.active = 2;
				this.showInfo = true;
				this.showImg = false;
			},
			//进件结果查询
			queryMerchant() {
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userid,
						type: 4,
						genre: 3,
					},
					success(res) {
						if (res.data.code == 200) {
						  that.$message.success(res.data.msg);
						}else{
						 that.$message.error(res.data.msg);
						}
					},
				});
			},
			//微信配置
			wxConfig(){
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userid,
						type: 4,
						genre: 4,
					},
					success(res) {
						console.log(res);
						if (res.data.code == 200) {
						  that.$message.success(res.data.msg);
						}else{
						 that.$message.error(res.data.msg);
						}
					},
				});
			},
			//配置结果查询
			queryWXConfig(){
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userid,
						type: 4,
						genre: 5,
					},
					success(res) {
						console.log(res);
						if (res.data.code == 200) {
						  that.$message.success(res.data.msg);
						}else{
						 that.$message.error(res.data.msg);
						}
					},
				});
			},
			//图片上传方法
			delshow(a) { //删除图片 重新上传
				this.$set(this.typeList[a], 'show', false);
				this.$set(this.typeList[a], 'upShow', true);
				this.$set(this.typeList[a], 'url', '');
			},
			delup(a) {
				this.$set(this.typeList[a], 'show', false);
				this.$set(this.typeList[a], 'upShow', true);
				this.$set(this.typeList[a], 'url', '');
			},
			handleAvatarSuccess(res, file, id) {
				if (res.code == 200) {
					this.loadingStatus = false;
					this.$set(this.typeList[id], 'url', res.content.path);
				}
			},
			beforeAvatarUpload(file) {
				this.loadingStatus = true;
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			upChange(id, url) {
				if (!this.typeList[id].url) {
					this.$message.error('上传图片不能为空');
				}
				this.loadingStatus = true;
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userid,
						type: 4,
						genre: 1,
						imgID: this.typeList[id].id,
						imgUrl: this.typeList[id].url,
					},
					success(res) {
						if (res.data.code == 200) {
							that.loadingStatus = false;
							that.$set(that.typeList[id], 'butt', false);
							that.$set(that.typeList[id], 'upSuccess', true);
							that.$message.success('上传成功');
						}else{
							that.loadingStatus = false;
							that.$message.error('上传失败');
						}
					},
				});
			},
			
			//商户详情
			//上一步
			lastImg(){
				this.active = 1;
				this.showInfo = false;
				this.showImg = true;
			},
			onSubmit() {
				this.form.prdList = this.feeList;
				let that = this;
				this.$axios({
					url: '/admin/channel/other',
					data: {
						userID: this.userid,
						type: 4,
						genre: 2,
						info: this.form
					},
					success(res) {
						if (res.data.code == 200) {
						   that.$message.error(res.data.msg);
						}else{
							that.$message.error(res.data.msg);
						}
					},
				});
			},
			//费率列表删除	
			del(val) {
				this.$delete(this.feeList, val);
			
			},
			//新增费率列表
			feeAdd() {
				this.feeList.push({
					paymentPrdNo: 'WX',
					feeType: '01',
					feeTemplate: '',
				});
			},
			//复合费率
			feeType(val) {
				if (this.feeList[val].feeType == '02' &&
					this.feeList[val].paymentPrdNo != 'UPAY') {
					this.$message.error('只有云闪付才能选择复合费率！');
				}
			},
			//添加复合费率
			feesub(val) {
				console.log(this.feeTemplate)
				this.feeList[val].feeTemplate = JSON.stringify(this.feeTemplate);
				console.log(this.feeList);
			
			},
			getArea(id, type) {
				let that = this;
				this.$axios({
					url: '/admin/conf/getArea',
					data: {
						type: 4,
						parentID: id,
					},
					success(res) {
						if (res.data.code == 200) {
							if (type == 0) {
								that.provinceList = res.data.content;
							}
							if (type == 1) {
								that.cityList = res.data.content;
							}
							if (type == 2) {
								that.areaList = res.data.content;
							}
						}
					}
				})
			},
			fprovince(data) { //省份
				let obj = {}
				obj = this.provinceList.find(function(item) {
					return item.code === data
				})
				this.form.province = data;
				console.log(obj)
				//下一个
				this.getArea(obj.AreaID, 1);
			},
			fbprovince(data) { //省份
				let obj = {}
				obj = this.provinceList.find(function(item) {
					return item.code === data
				})
				this.form.branchProvince = data;
				//下一个
				this.getArea(obj.AreaID, 1);
			},
			fcity(data) {
				let obj = {}
				obj = this.cityList.find(function(item) {
					return item.code === data
				})
				this.form.city = data;
				//下一个
				this.getArea(obj.AreaID, 2);
			},
			fbcity(data) {
				let obj = {}
				this.form.branchCity = data;
			},
			farea(data) {
				this.form.area = data;
			},
			
			getData(){
				let that = this;
				this.$axios({
					url: '/admin/general/getUserInfo',
					data: {
						userID: this.userid,
						type :4
					},
					success(res) {
						if (res.data.code == 200) {
							that.merchantInfo = res.data.content;
							that.mch_id = res.data.content.mch_id;  //商户号
							that.intoNo = res.data.content.intoNo;  //进件返回单号 用于查询结果
							//图片
							let imageList = that.merchantInfo.user_file;
							that.typeList[0].url = imageList.front_card;
							that.typeList[0].show = imageList.front_card ? true : false;
							that.typeList[0].upShow = imageList.front_card ? false : true;
							that.typeList[1].url = imageList.back_card;
							that.typeList[1].show = imageList.back_card ? true : false;
							that.typeList[1].upShow = imageList.back_card ? false : true;
							that.typeList[2].url = imageList.business_license;
							that.typeList[2].show = imageList.business_license ? true : false;
							that.typeList[2].upShow = imageList.business_license ? false : true;
							that.typeList[3].url = imageList.opening_account;
							that.typeList[3].show = imageList.opening_account ? true : false;
							that.typeList[3].upShow = imageList.opening_account ? false : true;
							that.typeList[4].url = imageList.sign_doard;
							that.typeList[4].show = imageList.sign_doard ? true : false;
							that.typeList[4].upShow = imageList.sign_doard ? false : true;
							that.typeList[8].url = imageList.bank_card;
							that.typeList[8].show = imageList.bank_card ? true : false;
							that.typeList[8].upShow = imageList.bank_card ? false : true;
							//详情
							that.form.merName = that.merchantInfo.nick_name;
							that.form.merFullName = that.merchantInfo.user_name;
							that.form.licId = that.merchantInfo.org_num;
							that.form.legalName = that.merchantInfo.legal_person;
							that.form.legalCertNo = that.merchantInfo.legal_person_id;
							that.form.legalMobile = that.merchantInfo.link_phone;
							that.form.contactName = that.merchantInfo.legal_person;
							that.form.contactMobile = that.merchantInfo.link_phone;
							that.form.contactIdNo = that.merchantInfo.legal_person_id;
							that.form.addr = that.merchantInfo.address;
							that.form.acctName = that.merchantInfo.account_name;
							that.form.account = that.merchantInfo.account_no;
							that.form.pbcBankId = that.merchantInfo.bank_code;
							that.form.bankName = that.merchantInfo.bank_name;
						}
					}
				});
			}
		},
		created() {
			this.getData();
			//得到区域编码
			this.getArea(0, 0);
		}

	}
</script>
<style scoped>
	.page {
		background: #FFFFFF;
	}

	.next-up-img {
		text-align: center;
		margin-top: 50px;
	}
	.top-nav{
		height: 50px;
		display: flex;
	}
	.mch-id{
		line-height: 50px;
		margin-left: 20px;
		width: 400px;
	}

	/* 图片上传样式 */
	.img-nav {
		margin-top: 15px;
	}
	
	.nav-text-1 {
		font-size: 16px;
		font-weight: bold;
	}
	
	.nav-text-2 {
		font-size: 10px;
		color: #99A9BF;
		font-weight: 100;
	}
	
	.nav-text-3 {
		color: #67C23A;
	}
	
	.nav-radio {
		margin-top: 20px;
		margin-left: 40px;
	}
	
	.img-box {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	
	.img-box-s {
		margin-left: 100px;
	}
	
	.img-show {
		width: 220px;
		height: 220px;
		display: flex;
		flex-direction: column;
		/* 	justify-content: center;
	align-items: center; */
	}
	
	.img-up {
		width: 220px;
		height: 220px;
		/* border: 1px solid #99A9BF; */
	}
	
	
	
	.del-img {
		display: flex;
		justify-content: flex-end;
	
	}
	
	.del-img img {
		height: 15px;
		width: 15px;
		border: 1px solid #FFFFFF;
		border-radius: 15px;
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #888888;
	}
	
	.show-img img {
		height: 200px;
		width: 200px;
	}
	
	/* 上传样式 */
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 220px;
		height: 220px;
		line-height: 220px;
		text-align: center;
	}
	
	.avatar {
		width: 200px;
		height: 200px;
		display: block;
	}
	
	.butt {
		text-align: center;
		margin-top: 10px;
	}
	
	.text-t {
		font-size: 16px;
		color: #888888;
	}
</style>
